<template>
	<view>
		<view class="fac">
			<text class="icon mr2">&#xe62d;</text>
			<view class="py4 tac" v-if="value[0]" @click="focus(0)">{{filter.ymd(value[0])}}</view>
			<view v-else class="py4 tac c11">开始时间</view>
			<text class="c11 mx2">至</text>
			<view class="py4 tac" v-if="value[1]" @click="focus(1)">{{filter.ymd(value[1])}}</view>
			<view v-else class="py4 tac c11">结束时间</view>
		</view>
		<u-popup mode="bottom" v-if="timeShow" v-model:value="timeShow">
			<view class="fjb p6">
				<view class="c9" @click="timeShow=false">取消</view>
				<view class="fc-primary" @click="confirm">确定</view>
			</view>
			<picker-view class="wt h" :value="picker" indicator-class="h8" @change="change">
				<picker-view-column :scroll-y="true" class="f1">
					<view class="fjc" v-for="i in range[0]" :key="i">{{i}}年</view>
				</picker-view-column>
				<picker-view-column :scroll-y="true" class="f1" v-if="type<2">
					<view class="fjc" v-for="i in range[1]" :key="i">{{i}}月</view>
				</picker-view-column>
				<picker-view-column :scroll-y="true" class="f1" v-if="type==0">
					<view class="fjc" v-for="i in range[2]" :key="i">{{i}}日</view>
				</picker-view-column>
			</picker-view>
		</u-popup>
	</view>
</template>

<script>
import util from '@/utils/util'
import filter from '@/utils/filter'
import Emitter from 'uview-plus/libs/util/emitter'

export default {
	mixins: [Emitter],
	props: {
		type: {
			type: Number,
			default: 0
		},
		value: {
			type: Array,
			default: () => [uni.$u.date(util.now()-86400,'yy-mm-01'), uni.$u.date(util.now()-86400)]
		},
		onlyDate: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			filter: filter,
			timeShow: false,
			dateType: 0,
			index: 0,
			picker: [0,0,0],
			select: [],
			range: [[],[],[]]
		}
	},
	computed: {
		min() {
			if(this.index == 0){
				const diff = 2592000 * [3, 12, 36][this.type];
				return uni.$u.date(Date.parse(this.value[1]) / 1000 - diff, ['yyyy-mm-dd', 'yyyy-mm', 'yyyy'][this.type])
			}
			if(this.index == 1){
				return this.value[0]
			}
		},
		max() {
			if(this.index == 0){
				return this.value[1]
			}
			if(this.index == 1){
				const diff = 2592000 * [1, 12, 36][this.type];
				const max = Date.parse(this.value[0]) / 1000 + diff;
				return uni.$u.date(Math.min(max, util.now() - 3600 * 24), ['yyyy-mm-dd', 'yyyy-mm', 'yyyy'][this.type])
			}
		}
	},
	mounted(){  //创建vue实例之后,首次必执行的函数
		const v = this.value[this.index].split('-')
		this.select = v
		this.initRange()
		this.$set(this.picker, 0, this.range[0].findIndex(r=>r==v[0]))
		this.type<2 && (this.$set(this.picker, 1, this.range[1].findIndex(r=>r==v[1])))
		this.type<1 && (this.$set(this.picker, 2, this.range[2].findIndex(r=>r==v[2])))
	},
	methods: {
		confirm(e){
			this.value[this.index] = this.select.filter((r,i)=>i<3-this.type).join('-')
			this.$emit('update:value', this.value)
			this.$emit('change', this.value)
			this.timeShow = false
			setTimeout(() => {
				this.dispatch('u-form-item', 'onFieldChange', this.value)
			}, 40)
		},
		change(e){
			const v = e.detail.value
			this.select = [this.range[0][v[0]]]
			this.type<2 && (this.select[1]=this.range[1][v[1]])
			this.type<1 && (this.select[2]=this.range[2][v[2]])
			this.updateRange(this.select)
			this.picker = v
		},
		focus(i){
			this.index=i
			if(this.select.join('-') != this.value[this.index]){
				this.select = this.value[this.index].split('-')
				this.updateRange(this.select)
			}
			this.timeShow=true
		},
		initRange(){
			const min = this.min.split('-')
			const max = this.max.split('-')
			for(let i = parseInt(min[0]); i <= parseInt(max[0]); i++){
				this.range[0].push(i)
			}
			if(this.type>1){
				return
			}
			const startMonth = this.select[0] == min[0] ? min[1] : 1
			const endMonth = this.select[0] == max[0] ? max[1] : 12
			for(let i = startMonth; i <= endMonth; i++){
				this.range[1].push(i.toString().padStart(2, '0'))
			}
			if(this.type>0){
				return
			}
			const startDate = this.select[1] == min[1] ? min[2] : 1
			const endDate = this.select[1] == max[1] ? max[2] : [31,this.select[0]%4==0?29:28,31,30,31,30,31,31,30,31,30,31][parseInt(this.select[1])-1]
			for(let i = startDate; i <= endDate; i++){
				this.range[2].push(i.toString().padStart(2, '0'))
			}
		},
		updateRange(v){
			const min = this.min.split('-')
			const max = this.max.split('-')
			
			if(this.type>0 && this.picker[0]!=v[0]){
				const startMonth = this.select[0] == min[0] ? min[1] : 1
				const endMonth = this.select[0] == max[0] ? max[1] : 12
				this.range[1] = []
				for(let i = startMonth; i <= endMonth; i++){
					this.range[1].push(i.toString().padStart(2, '0'))
				}
			}
			if (this.type>1 && this.picker[0] != v[0] || this.picker[1] != v[1]) {
				const startDate = this.select[0] == min[0] && this.select[1] == min[1] ? min[2] : 1
				const endDate = this.select[0] == max[0] && this.select[1] == max[1] ? max[2] : [31,this.select[0]%4==0?29:28,31,30,31,30,31,31,30,31,30,31][parseInt(this.select[1])-1]
				this.range[2] = []
				for(let i = startDate; i <= endDate; i++){
					this.range[2].push(i.toString().padStart(2, '0'))
				}
			}
		}
	}
}
</script>
<style scoped>
	.h{height: 30vh}
</style>